<script setup>
import { ref } from 'vue';
import ColorPicker from '../components/ColorPicker.vue';

const color1 = ref('#ff0000');
const color2 = ref('#00ff00');
const color3 = ref('#0000ff');

const handleColorChange = (color) => {
  console.log('颜色已更改:', color);
};
</script>

<template>
  <div class="color-picker-demo">
    <h2>颜色选择器示例</h2>
    
    <div class="demo-item">
      <h3>基础用法</h3>
      <ColorPicker v-model="color1" @change="handleColorChange" />
      <p>选中的颜色: {{ color1 }}</p>
    </div>
    
    <div class="demo-item">
      <h3>带透明度</h3>
      <ColorPicker 
        v-model="color2"
        :show-alpha="true"
        :preset-colors="['#ff0000', '#00ff00', '#0000ff', '#ffff00']"
      />
      <p>选中的颜色: {{ color2 }}</p>
    </div>
    
    <div class="demo-item">
      <h3>禁用状态</h3>
      <ColorPicker 
        v-model="color3"
        :disabled="true"
        default-color="#666666"
      />
      <p>选中的颜色: {{ color3 }}</p>
    </div>
  </div>
</template>

<style scoped>
.color-picker-demo {
  padding: 20px;
}

.demo-item {
  margin-bottom: 30px;
}

h2 {
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 15px;
}
</style>
